<template>
    <div class="snap">
        
<van-nav-bar title="限时抢购" left-text="返回" left-arrow fixed>
     <template #left>
    <van-icon name="arrow-left" size="18" color="black" @click="back()"/>
  </template>
   <template #right>
    <van-icon name="share-o" size="18" @click="ri()" color="#6f6f6f"/>
  </template>
</van-nav-bar>
<van-share-sheet
  v-model="showShare"
  title="立即分享给好友"
  :options="options"
/>


<div class="ban">
    <img src="../../assets/img/sanp.jpg" alt="">
</div>
<ul>
    <li>
        <span>10.00</span>
        一开枪
    </li>
     <li>
        <span>10.00</span>
        一开枪
    </li>
     <li class="red">
        <span>10.00</span>
        一开枪
    </li>
     <li>
        <span>10.00</span>
        一开枪
    </li>
     <li>
        <span>10.00</span>
        一开枪
    </li>
</ul>

<div class="items">
    <div class="item" v-for="item in list" :key="item.id" @click="goDetail(item.id)">
        <img :src="item.picture" alt="">
        <div class="itemRight">
            <p>{{item.shop}}</p>
            <span>限时价</span>
            <span class="redSpan">￥{{item.price}}</span>
            <span class="no">$199</span>
            <div class="only">仅剩12件</div>
            <button>马上抢</button>
        </div>
    </div>
     
</div>
    </div>
</template>

<script>

import { Icon } from 'vant';
Vue.use(Icon);
import Vue from 'vue';
import { NavBar } from 'vant';
import { Toast } from 'vant';
Vue.use(NavBar);
import { ShareSheet } from 'vant';
Vue.use(ShareSheet);
export default {
    
    data:function(){
        return{
             showShare: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '二维码', icon: 'qrcode' },
        ],
      ],
      list:[]
        }
    },
    methods:{
        getList:function(){
       this.list= this.$store.getters.getSnap
       console.log(this.list);
        },
        back:function(){
            this.$router.go(-1)
        },
          ri(){
            this.showShare=true
        },
        goDetail:function(id){
           this.$router.push({path:`/detail/${id}`})
        }
    },
    created () {
      this.getList()
    }

}
</script>

<style scoped lang="scss">

.snap{
    background-color: #f2f2f2 !important;
}
.ban{
    img{
        width: 100%;
     height: 7.8125rem;
    }
}
ul{
    height: 3.125rem;
    width: 29.5625rem;
    color: #6a6462;
    margin-bottom: 0.875rem;
    li{
        width: 5.75rem;
        
        height: 3.375rem;
          background-color: #fff;
          text-align: center;
          padding-top: 0.5rem;
          float: left;
          font-size: 0.75rem;
    }
    span{
        display: block;
       margin-bottom: 0.5rem;
        font-weight: 600;
        font-size: 1rem;
    }
    .red{
        background-color: #ff0036;
        color: white;
    }
}
.items{
    .item{
        height: 10.25rem;
        background-color: #fff;
        padding: 1.25rem 0.875rem;
        margin-bottom: 0.125rem;
        img{
            width: 8rem;
            float: left;
            height: 8rem;
        }
        .itemRight{
            width: 59%;
            float: left;
            margin-left: 0.75rem;
            height: 100%;
            font-size: 0.8rem;
            color: #767778;
            text-align: left;
            p{
                font-size: 1.125rem;
                text-align: left;
                color: black;
                margin-bottom: 0.875rem;
                overflow: hidden;
                white-space: normal;
                text-overflow: ellipsis;
                
                width: 100%;
                height: 1.075rem;
            }
            span{
                display: inline-block;
                margin-right: 20px;
                 font-size: 0.875rem;
                   color: #767778;
                margin-bottom: 1.875rem;

            }
 
            .redSpan{
                color: #ff0036;
            }
            .no{
                text-decoration: line-through;
            }
            .only{
                font-size: 0.75rem;
                border: 1px solid #faaab0;
                // margin-right: 1.05rem;
                width: 5.875rem;
                height: 1.375rem;
                border-radius: 1.3rem;
                text-align: center;
                line-height: 1.3rem;
                float: left;
                margin-top: 0.5rem;
            }
            button{
                width: 6.25rem;height: 2.1875rem;
                border-radius: 0.375rem;
                color: white;
                font-size: 1rem;
                border: none;
                text-align: center;
                line-height: 2.1875rem;
                float: right;
                background-color: #ff0036;
            }
        }
    }
}
</style>